<!DOCTYPE html>
<!-- saved from url=(0047)https://s3.envato.com/files/87575523/index.html -->
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>CCSlider</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="./CCSlider_files/css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="./CCSlider_files/reset.css">
	<link rel="stylesheet" href="./CCSlider_files/ccslider.css">
	<link rel="stylesheet" href="./CCSlider_files/style.css">

	<style type="text/css">
		body {
			width: 100%;
			max-width: 1000px;
		}

		#slider {
			width: 1000px;
			height: 450px;
		}

		#slider .control-links {
			margin-top: -15px;
		}

		#demo-description {
			max-width: 900px;
			width: 90%;
			margin: 60px auto;
			color: #fff;
			font: 20px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
		}
	</style>

	<!--[if lt IE 8]>
		<script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
	<![endif]-->

	<!--[if lt IE 9]>
		<style type="text/css">
			.slider-caption {
				background: transparent;
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)"; /* IE8 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF);   /* IE6 & 7 */
				zoom: 1;
			}
		</style>

		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->


</head>
<body>


	<header>
		<hgroup>
			<h1 id="title"><img src="./CCSlider_files/title.png" alt="ccslider"></h1>
			<h2 id="subtitle">The slider that opens a new dimension</h2>
		</hgroup>

		<nav id="demo-nav">
			<ul>
				<li class="active"><a href="https://s3.envato.com/files/87575523/index.html">Demo 1</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo2.html">Demo 2</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo3.html">Demo 3</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo4.html">Demo 4</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo5.html">Demo 5</a></li>
			</ul>
		</nav>
	</header>

	<div id="slider" class="ccslider" style="background: none transparent;"><div class="slider-innerWrapper" style="display: none;">
		<img src="./CCSlider_files/assassins1.jpg" alt="This is an example of a simple caption" data-caption-position="bottom" data-transition="{&quot;effect&quot;: &quot;cubeUp&quot;, &quot;slices&quot;: 9, &quot;animSpeed&quot;: 1200, &quot;delay&quot;: 100, &quot;delayDir&quot;: &quot;fromCentre&quot;, &quot;easing&quot;: &quot;easeInOutBack&quot;, &quot;depthOffset&quot;: 300, &quot;sliceGap&quot;: 30}">
		<img src="./CCSlider_files/deus-ex1.jpg" alt="" data-captionelem="#caption" data-caption-position="top" data-transition="{&quot;effect&quot;: &quot;cubeRight&quot;, &quot;slices&quot;: 5, &quot;delay&quot;: 200}">
		<img src="./CCSlider_files/batman.jpg" alt="Images can also serve as links. To see this in effect click on this slide image" data-caption-position="left" data-href="https://google.com" data-transition="{&quot;effect&quot;: &quot;cubeDown&quot;, &quot;slices&quot;: 15, &quot;animSpeed&quot;: 3000, &quot;delay&quot;: 30, &quot;easing&quot;: &quot;easeInOutElastic&quot;, &quot;depthOffset&quot;: 200, &quot;sliceGap&quot;: 20}">
		<img src="./CCSlider_files/prince.jpg" alt="" data-transition="{&quot;effect&quot;: &quot;cubeLeft&quot;, &quot;slices&quot;: 5, &quot;delay&quot;: 200, &quot;delayDir&quot;: &quot;toCentre&quot;}">
		<img src="./CCSlider_files/assassins2.jpg" alt="" data-transition="{&quot;effect&quot;: &quot;cubeUp&quot;, &quot;slices&quot;: 5, &quot;animSpeed&quot;: 1300, &quot;delay&quot;: 100, &quot;easing&quot;: &quot;easeInOutCubic&quot;, &quot;depthOffset&quot;: 500, &quot;sliceGap&quot;: 50}">
		<img src="./CCSlider_files/deus-ex2.jpg" alt="" data-transition="{&quot;effect&quot;: &quot;cubeRight&quot;, &quot;slices&quot;: 5, &quot;delay&quot;: 200, &quot;delayDir&quot;: &quot;last-first&quot;}">
	</div><a class="slider-nav prev" style="left: 33px;"></a><a class="slider-nav next" style="right: 33px;"></a><ul class="control-links"><li data-index="0" class="active">1</li><li data-index="1">2</li><li data-index="2">3</li><li data-index="3">4</li><li data-index="4">5</li><li data-index="5">6</li></ul><div class="slider-timer pause" style="right: 70px; top: 70px;"></div><div class="slider-caption bottom" style="width: 880px; left: 50px; bottom: 50px; right: auto; display: block;">This is an example of a simple caption</div><div class="cc-htmlwrapper" style="width: 900px; height: 350px; left: 50%; top: 50%; margin-left: -450px; margin-top: -175px;"></div><a class="slider-link" href="https://s3.envato.com/files/87575523/index.html" style="display: none; width: 900px; height: 350px; left: 50%; top: 50%; margin-left: -450px; margin-top: -175px;"></a><canvas class="draw" width="1000" height="450" style="z-index: 2;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 3;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 4;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 5;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 6;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 5;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 4;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 3;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 2;"></canvas><canvas class="shadow" width="1000" height="450" style="z-index: 1;"></canvas></div>

	<div id="caption" class="cc-caption">This is an example of a caption with a <a href="https://www.google.com/">link</a></div>

	<p id="demo-description">
		Here each slide has a different transition with different number of slices, animation speed, delay etc. Also the shadow option is enabled and the transitions interchange between the available “Cube” 3d effects.
	</p>


	<script src="./CCSlider_files/jquery.min.js.下载"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="./CCSlider_files/jquery-migrate-1.1.1.min.js.下载"></script>
	<script src="./CCSlider_files/jquery.ccslider-3.0.2.min.js.下载"></script>
	<script>
		$(function(){
			$('#demo-nav').find('a').tooltip({effect: 'slide'});
		});

		$(window).load(function(){
			$('#slider').ccslider({
				_3dOptions: {
					imageWidth: 900,
					imageHeight: 350
				}
			});
		});
	</script>


</body></html>